<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>病历模板管理</title>
    <link rel="stylesheet" href="css/adminMedicalTemplate.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="main-wrapper">
    <div class="sidebar">
        <h3>医院病例管理系统</h3>
        <ul>
            <li><a href="./adminUserList.html">用户管理</a></li>
            <li><a href="./adminMedicalRecordList.html">病历管理</a></li>
            <li><a href="./adminPersonalCenter.html">个人信息管理</a></li>
            <li><a href="./adminMedicalTemplate.html" class="active">病历模板管理</a></li>
            <li><a href="./adminUpdateRequest.html">信息修改申请</a></li>
        </ul>
    </div>

    <div class="main-content">
        <div class="info-card">
            <h2>病历模板管理</h2>

            <!-- 添加模板表单 -->
            <form id="templateForm">
                <div class="form-row">
                    <div class="form-group">
                        <input type="text" class="form-control" id="templateName" placeholder="模板名称">
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-primary" id="addTemplateBtn">添加模板</button>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group-full">
                        <textarea class="form-control" id="templateContent" rows="10"
                                placeholder="请输入模板内容，使用JSON格式：
{
    'readme': '常见主诉',
    'present': '常见现病史',
    'present_treat': '常见治疗情况',
    'history': '常见既往史',
    'allergy': '常见过敏史',
    'physique': '常见体格检查',
    'proposal': '常见检查建议',
    'careful': '常见注意事项',
    'diagnosis': '常见诊断结果',
    'cure': '常见处理意见'
}"></textarea>
                    </div>
                </div>
            </form>

            <!-- 模板列表 -->
            <table class="data-table">
                <thead>
                    <tr>
                        <th>模板名称</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="templateTableBody">
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
$(function(){
    const backendBaseUrl = 'http://localhost:8080';

    // 加载模板列表
    function loadTemplates() {
        $.ajax({
            url: backendBaseUrl + '/admin/medical/templates/list',
            type: 'GET',
            xhrFields: { withCredentials: true },
            success: function(res) {
                if(res.code === 0) {
                    const $tbody = $('#templateTableBody');
                    $tbody.empty();

                    res.data.forEach(template => {
                        const $row = $('<tr>');
                        $row.append($('<td>').text(template.name));
                        $row.append($('<td>').text(new Date(template.createTime).toLocaleString()));

                        const $deleteBtn = $('<button>')
                            .addClass('btn btn-danger')
                            .text('删除')
                            .click(() => deleteTemplate(template.id));

                        // 添加查看按钮
                        const $viewBtn = $('<button>')
                            .addClass('btn btn-info view-template-btn')
                            .text('查看')
                            .data('id', template.id);

                        // 添加编辑按钮
                        const $editBtn = $('<button>')
                            .addClass('btn btn-secondary edit-template-btn')
                            .text('编辑')
                            .data('id', template.id);

                        const $actionsCell = $('<td>').append($viewBtn, ' ', $editBtn, ' ', $deleteBtn); // Add space between buttons
                        $row.append($actionsCell);
                        $tbody.append($row);
                    });

                    // 为查看按钮绑定点击事件 (事件委托)
                    $('#templateTableBody').on('click', '.view-template-btn', function(){
                        const templateId = $(this).data('id');
                        if (templateId) {
                            viewTemplateDetail(templateId);
                        } else {
                            alert('无法获取模板ID，请稍后重试。');
                        }
                    });

                    // 为编辑按钮绑定点击事件 (事件委托)
                    $('#templateTableBody').on('click', '.edit-template-btn', function(){
                        const templateId = $(this).data('id');
                        if (templateId) {
                            loadTemplateForEdit(templateId);
                        } else {
                            alert('无法获取模板ID，请稍后重试。');
                        }
                    });
                } else {
                     alert('加载模板列表失败: ' + (res.message || ''));
                }
            },
             error: function() {
                alert('加载模板列表失败，请稍后重试。');
            }
        });
    }

    // 添加模板
    $('#addTemplateBtn').click(function() {
        const name = $('#templateName').val();
        const content = $('#templateContent').val();

        if(!name || !content) {
            alert('请填写完整信息');
            return;
        }

        try {
            // 验证JSON格式
            JSON.parse(content);
        } catch(e) {
            alert('模板内容必须是有效的JSON格式');
            return;
        }

        $.ajax({
            url: backendBaseUrl + '/admin/medical/templates/add',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                name: name,
                content: content
            }),
            xhrFields: { withCredentials: true },
            success: function(res) {
                if(res.code === 0) {
                    alert('添加成功');
                    $('#templateName').val('');
                    $('#templateContent').val('');
                    loadTemplates();
                } else {
                    alert(res.message || '添加失败');
                }
            },
             error: function() {
                alert('添加失败，请稍后重试');
            }
        });
    });

    // 删除模板
    function deleteTemplate(id) {
        if(confirm('确定要删除这个模板吗？')) {
            $.ajax({
                url: backendBaseUrl + '/admin/medical/templates/' + id,
                type: 'DELETE',
                xhrFields: { withCredentials: true },
                success: function(res) {
                    if(res.code === 0) {
                        alert('删除成功');
                        loadTemplates();
                    } else {
                        alert(res.message || '删除失败');
                    }
                },
                error: function() {
                    alert('删除失败，请稍后重试');
                }
            });
        }
    }

    // 查看模板详情
    function viewTemplateDetail(templateId) {
        $.ajax({
            url: backendBaseUrl + '/admin/medical/templates/' + templateId, // 调用根据ID获取模板信息的后端接口
            type: 'GET',
            xhrFields: { withCredentials: true },
            success: function(res) {
                if (res.code === 0 && res.data) {
                    const template = res.data;
                    // 填充模态框
                    $('#templateModalTitle').text(template.name);
                    // 使用JSON.stringify格式化内容以便在 <pre><code> 中显示
                    $('#templateModalContent').text(JSON.stringify(JSON.parse(template.content), null, 4));

                    // 显示模态框
                    const viewTemplateModal = new bootstrap.Modal(document.getElementById('viewTemplateModal'));
                    viewTemplateModal.show();

                } else {
                    alert('获取模板信息失败: ' + (res.message || ''));
                }
            },
            error: function() {
                alert('获取模板信息失败，请稍后重试。');
            }
        });
    }

    // 加载模板数据并显示编辑模态框
    function loadTemplateForEdit(templateId) {
        $.ajax({
            url: backendBaseUrl + '/admin/medical/templates/' + templateId, // 调用根据ID获取模板信息的后端接口
            type: 'GET',
            xhrFields: { withCredentials: true },
            success: function(res) {
                if (res.code === 0 && res.data) {
                    const template = res.data;
                    // 填充模态框表单
                    $('#editTemplateId').val(template.id);
                    $('#editTemplateName').val(template.name);
                    // 使用JSON.stringify格式化内容，使其在textarea中更易读
                    $('#editTemplateContent').val(JSON.stringify(JSON.parse(template.content), null, 4));

                    // 显示模态框
                    const editTemplateModal = new bootstrap.Modal(document.getElementById('editTemplateModal'));
                    editTemplateModal.show();

                } else {
                    alert('获取模板信息失败: ' + (res.message || ''));
                }
            },
            error: function() {
                alert('获取模板信息失败，请稍后重试。');
            }
        });
    }

    // 模态框保存按钮点击事件
    $('#saveTemplateBtn').click(function(){
        const templateId = $('#editTemplateId').val();
        const name = $('#editTemplateName').val();
        const content = $('#editTemplateContent').val();

        if (!name || !content) {
            alert('请填写完整信息');
            return;
        }

        try {
            // 验证JSON格式
            JSON.parse(content);
        } catch(e) {
            alert('模板内容必须是有效的JSON格式');
            return;
        }

        const templateData = {
            id: templateId,
            name: name,
            content: content
        };

        $.ajax({
            url: backendBaseUrl + '/admin/medical/templates/update', // 调用更新模板信息的后端接口
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(templateData),
            xhrFields: { withCredentials: true },
            success: function(res) {
                if (res.code === 0) {
                    alert('模板信息更新成功');
                    const editTemplateModal = bootstrap.Modal.getInstance(document.getElementById('editTemplateModal'));
                    editTemplateModal.hide(); // 关闭模态框
                    loadTemplates(); // 刷新列表
                } else {
                    alert('模板信息更新失败: ' + (res.message || ''));
                }
            },
            error: function() {
                alert('模板信息更新失败，请稍后重试。');
            }
        });
    });

    // 初始加载模板列表
    loadTemplates();
});
</script>

<!-- 查看模板内容模态框 -->
<div class="modal fade" id="viewTemplateModal" tabindex="-1" aria-labelledby="viewTemplateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewTemplateModalLabel">模板详情 - <span id="templateModalTitle"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <pre><code id="templateModalContent"></code></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑模板模态框 -->
<div class="modal fade" id="editTemplateModal" tabindex="-1" aria-labelledby="editTemplateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editTemplateModalLabel">编辑病历模板</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editTemplateForm">
                    <input type="hidden" id="editTemplateId">
                    <div class="mb-3">
                        <label for="editTemplateName" class="form-label">模板名称</label>
                        <input type="text" class="form-control" id="editTemplateName" required>
                    </div>
                    <div class="mb-3">
                        <label for="editTemplateContent" class="form-label">模板内容 (JSON)</label>
                         <textarea class="form-control" id="editTemplateContent" rows="15" required
                                 placeholder="请输入模板内容，使用JSON格式：
{
    'readme': '常见主诉',
    'present': '常见现病史',
    'present_treat': '常见治疗情况',
    'history': '常见既往史',
    'allergy': '常见过敏史',
    'physique': '常见体格检查',
    'proposal': '常见检查建议',
    'careful': '常见注意事项',
    'diagnosis': '常见诊断结果',
    'cure': '常见处理意见'
}"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveTemplateBtn">保存修改</button>
            </div>
        </div>
    </div>
</div>

</body>
</html> 